<template>
   <div class="app-container">
      <div class="head-container">
         <a-form :model="queryParams" ref="queryRef" layout="inline" v-show="showSearch" laba-width="68px">
            <a-form-item prop="ipaddr">
               <a-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable />
            </a-form-item>
            <a-form-item prop="userName">
               <a-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable />
            </a-form-item>
            <a-form-item prop="status">
               <a-select v-model="queryParams.status" placeholder="登录状态" clearable>
                  <a-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label"
                     :value="dict.value" />
               </a-select>
            </a-form-item>
            <a-form-item>
               <a-space>
                  <a-button type="primary" @click="handleQuery">
                     <template #icon>
                        <icon-search />
                     </template>
                     搜索</a-button>
                  <a-button @click="resetQuery">
                     <template #icon>
                        <icon-refresh />
                     </template>
                     重置</a-button>
               </a-space>
            </a-form-item>
         </a-form>
      </div>
      <div class="main-container">
         <div class="main-toolbar">
            <a-space>
               <a-button status="danger" :disabled="selectedKeys.length === 0" @click="handleDelete">
                  <template #icon>
                     <icon-delete />
                  </template>
                  删除</a-button>
               <a-button status="danger" @click="handleClean">
                  <template #icon>
                     <icon-delete />
                  </template>
                  清空</a-button>
               <a-button type="primary" :disabled="selectedKeys.length !== 1" @click="handleUnlock">
                  <template #icon>
                     <icon-unlock />
                  </template>
                  解锁</a-button>
            </a-space>
         </div>
         <div class="main-content">
            <a-table ref="logininforRef" :columns="columns" :data="logininforList" row-key="infoId"
               :row-selection="{ type: 'checkbox', showCheckedAll: true }" @selection-change="handleSelectionChange">

            </a-table>
         </div>
      </div>
   </div>
</template>

<script setup name="Logininfor">
import { cleanLogininfor, delLogininfor, list, unlockLogininfor } from "@/api/monitor/logininfor";

const { proxy } = getCurrentInstance();
const { sys_common_status } = proxy.useDict("sys_common_status");

const logininforList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const selectName = ref("");
const total = ref(0);
const dateRange = ref([]);
const defaultSort = ref({ prop: "loginTime", order: "descending" });

// 查询参数
const queryParams = ref({
   pageNum: 1,
   pageSize: 10,
   ipaddr: undefined,
   userName: undefined,
   status: undefined,
   orderByColumn: undefined,
   isAsc: undefined
});


const columns = ref([
   { key: 0, title: '访问编号', dataIndex: 'infoId' },
   { key: 1, title: '用户名称', dataIndex: 'userName' },
   { key: 2, title: '地址', dataIndex: 'ipaddr' },
   { key: 3, title: '登录地点', dataIndex: 'loginLocation' },
   { key: 4, title: '操作系统', dataIndex: 'os' },
   { key: 5, title: '浏览器', dataIndex: 'browser' },
   { key: 6, title: '登录状态', dataIndex: 'status' },
   { key: 7, title: '描述', dataIndex: 'msg' },
   { key: 8, title: '访问时间', dataIndex: 'loginTime' },
])
const selectedKeys = ref([])
/** 查询登录日志列表 */
function getList() {
   loading.value = true;
   list(proxy.addDateRange(queryParams.value, dateRange.value)).then(({ data }) => {
      logininforList.value = data.rows;
      total.value = data.total;
      loading.value = false;
   });
}
/** 搜索按钮操作 */
function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
}
/** 重置按钮操作 */
function resetQuery() {
   dateRange.value = [];
   proxy.resetForm("queryRef");
   queryParams.value.pageNum = 1;
   proxy.$refs["logininforRef"].sort(defaultSort.value.prop, defaultSort.value.order);
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
   selectedKeys.value = selection
}
/** 排序触发事件 */
function handleSortChange(column, prop, order) {
   queryParams.value.orderByColumn = column.prop;
   queryParams.value.isAsc = column.order;
   getList();
}
/** 删除按钮操作 */
function handleDelete(row) {
   const infoIds = row.infoId || ids.value;
   proxy.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?').then(function () {
      return delLogininfor(infoIds);
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
   }).catch(() => { });
}
/** 清空按钮操作 */
function handleClean() {
   proxy.$modal.confirm("是否确认清空所有登录日志数据项?").then(function () {
      return cleanLogininfor();
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess("清空成功");
   }).catch(() => { });
}
/** 解锁按钮操作 */
function handleUnlock() {
   const username = selectName.value;
   proxy.$modal.confirm('是否确认解锁用户"' + username + '"数据项?').then(function () {
      return unlockLogininfor(username);
   }).then(() => {
      proxy.$modal.msgSuccess("用户" + username + "解锁成功");
   }).catch(() => { });
}
/** 导出按钮操作 */
function handleExport() {
   proxy.download("monitor/logininfor/export", {
      ...queryParams.value,
   }, `config_${new Date().getTime()}.xlsx`);
}

getList();
</script>
